<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="pragram" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="./logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./static/css/loading.css" type="text/css" />
    <script src="./web_config.js"></script>
    <title>AGV智能调度系统</title>
    <script type="module" crossorigin src="./static/js/index-BPhCEKNy.js"></script>
    <link rel="stylesheet" crossorigin href="./static/css/index-CJBWxIxr.css">
  </head>
  <body>
    <div id="app">
      <section class="init-box">
        <div class="init-loading">
          <div class="init-loading-rect"></div>
          <div class="init-loading-rect"></div>
          <div class="init-loading-rect"></div>
          <div class="init-loading-rect"></div>
          <div class="init-loading-rect"></div>
        </div>
      </section>
    </div>
  </body>
</html>

<!-- import Footer from './components/footer.vue'
import Sider from './components/sider/index.vue'
import SiderMini from './components/sider-mini/index.vue'
import Konva from './components/konva/index.vue'
import OpenLayers from './components/openLayers/index.vue'
import ThreeMap from './components/3dMap.vue'
import { useAppStore } from '@/stores'
import { watchMapMessage } from '@/apis'
import { useMapStore, useThreeMapStore } from '@/stores'
import { useMainStore } from '@/stores'
const mainStore = useMainStore()
mainStore.getAllList()
const mapStore = useMapStore()
const appStore = useAppStore()
const threeMapStore = useThreeMapStore()
const sideHeight = {
  height: 'calc(100vh - 60px)'
}
// const { mapRotation } = mapStore
const mapRotationChange = () => {
  if (mapStore.appKonva) {
    mapStore.appKonva.stage.rotation(mapStore.mapRotation)
  }
}
function rotateMap() {
  mapStore.mapRotation += 90
  mapStore.mapRotation %= 360
}
const changeRotation = () => {
  rotateMap()
  if (mapStore.appKonva) {
    mapStore.appKonva.stage.rotation(mapStore.mapRotation)
  }
}
const viewMapType = ref('2D')
const height = computed(() => {
  const viewSize = JSON.parse(localStorage.getItem('map_size') as any) ?? window.innerHeight - 250
  return viewSize
})
window.onresize = () => {
  resizeHeight.value = JSON.parse(localStorage.getItem('map_size') as any) ?? window.innerHeight - 250
  if (mapStore.appOpenLayer.map) {
    localStorage.setItem('map_size', JSON.stringify(resizeHeight.value))
    mapStore.appOpenLayer.map.updateSize()
  }
}
const resizeHeight = ref(height.value)
const footerRef: any = ref(null)
const konvaRef: any = ref(null)
const watchSign = ref(0)
watch(
  () => watchSign.value,
  () => {
    if (!mapStore.loadMapSign) {
      mapStore.postMapData({ type: 'load' }).then(() => {
        konvaRef.value.watchChangeMap(mapStore.mapUrl, 'reload')
        mapStore.getSelectShape('', {})
      })
    } else {
      mapStore.loadMapSign = false
    }
  }
)
const mapMessageConfig = ref()
onMounted(() => {
  initSocket()
  mapStore.getMapList().then(() => {
    const map = getInit()
    if (map) {
      mapStore.changeMap(map).then(() => {
        mapMessageConfig.value = map
        watchMapMessage(map)
      })
    } else {
      mapStore.changeMap(mapStore.mapList[0]).then(() => {
        mapMessageConfig.value = map
        watchMapMessage(map)
      })
    }
  })
})
const threeMapRef = ref()
const changeView = () => {
  if (mainStore.viewMapType) {
    reloadMap()
  } else {
    reloadMap()
  }
}
const reloadMap = () => {
  mapMessageConfig.value = {}
  mapStore.mapList.forEach((i) => {
    if (i.url == mapStore.mapUrl) {
      mapStore.changeMap(i).then(() => {
        mapMessageConfig.value = i
      })
    }
  })
}
const getInit = () => {
  for (let i of mapStore.mapList) {
    if (i.main == 1) {
      return i
    }
  }
  return mapStore.mapList[0]
}
const systemStatus = (data) => {
  // 假设 data.base_robot 是一个包含对象的数组
  for (let item of data.base_robot) {
    if (item.id == '10000') {
      return true
    }
  }
  return false
}
const initSocket = () => {
  const socket = new WebSocket('ws://' + window.location.hostname + ':3050')
  socket.onopen = () => {
    console.log('WebSocket已连接')
  }
  socket.onmessage = (even) => {
    const data = JSON.parse(even.data)
    if (data.base_robot) {
      const isSystemStatus = systemStatus(data)
      if (isSystemStatus) {
        mapStore.systemStatus = true
      } else {
        mapStore.systemStatus = false
      }
      mapStore.agvList = data.base_robot.filter((item) => {
        return item.id != '10000' && item.id != '9999'
      })
      // mapStore.agvList = data.base_robot

      // for (let i = 0; i < data.base_robot.length; i++) {
      //   mapStore.agvList[i] = Object.assign({}, mapStore.agvList[i], data.base_robot[i])
      // }
      // console.log(mapStore.agvList)
    } else {
      mapStore.agvList = []
    }
    // mapStore.agvList = data.base_robot
    // watchSign.value = data.saveMapSigns
    // if (data.saveMapSign == 1) {
    //   // if (!mapStore.loadMapSign) {
    //   mapStore.postMapData({ type: 'load' }).then(() => {
    //     konvaRef.value.watchChangeMap(mapStore.mapUrl, 'reload')
    //   })
    // } else {
    //   mapStore.loadMapSign = false
    // }
    // }

    if (data.logList != undefined && data.logList.length != 0) {
      footerRef.value?.add(data.logList)
    }
  }
  socket.onclose = () => {
    console.log('WebSocket已断开')
    setTimeout(initSocket, 3000)
  }
}
watch(
  () => resizeHeight.value,
  () => {
    localStorage.setItem('map_size', JSON.stringify(resizeHeight.value))
    if (mapStore.appOpenLayer.map) {
      mapStore.appOpenLayer.map.updateSize()
    }
    if (threeMapStore.threeMap) {
      threeMapStore.threeMap.resize()
    }
  }
)

const changeVisible = () => {
  mapStore.siderCollapse = !mapStore.siderCollapse
  if (mapStore.appOpenLayer.map) {
    setTimeout(() => {
      mapStore.appOpenLayer.map.updateSize()
    }, 500)
  }
  if (threeMapStore.threeMap) {
    setTimeout(() => {
      threeMapStore.threeMap.resize()
    }, 500)
  }
}
const searchValue = ref()
const visibleSelect = ref(false)
const ShapeOptions = computed(() => {
  const points = mapStore.points.map((item) => {
    return {
      value: item.point_id,
      label: item.point_name
    }
  })
  return points
})
const shapeChange = (value) => {
  mapStore.points.forEach((item) => {
    if (item.point_id == value) {
      mapStore.appOpenLayer.map.getView().animate({
        center: [item.position.x, item.position.y],
        duration: 100,
        zoom: 8
      })
    }
  })
}
const visibleSearch = () => {
  visibleSelect.value = !visibleSelect.value
} -->
